IndexedDB Manipulation with Dexie — Sorting, Iteration, and Keys

IndexedDB is a way to store data in the browser.

It lets us store larger amounts of data than local storage in an asynchronous way.

Dexie makes working with IndexedDB easier.

In this article, we’ll take a look at how to start working with IndexedDB with Dexie.

Reverse the Order of Collection Results

We can reverse the order of the collection results with the reverse method.

For example, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const friends = await db.friends
    .toCollection()
    .reverse()
    .toArray()
  console.log(friends)
})()

to get all the items and then reverse the order that’s returned.

Sort By the Given Field

We can call the sortBy method to sort by the given field.

For example, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const friends = await db.friends
    .where('age')
    .above(25)
    .sortBy('age');
  console.log(friends)
})()

We sort the results by age with the sortBy method.

Convert Collection to an Array

We can convert a collection to an array with the toArray method.

For instance, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const friends = await db.friends
    .where('age')
    .above(25)
    .toArray();
  console.log(friends)
})()

We convert the collection returned by the query methods to a promise with an array with the toArray method.

Get Unique Keys

We can get the unique keys from a collection with the uniqueKeys method.

For instance, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const keys = await db.friends
    .toCollection()
    .uniqueKeys()
  console.log(keys)
})()

We call uniqueKeys to get the unique keys from the collection.

We get the id values from the collection.

So we get:

[1, 2]

from the console log.

Stop Iterating Collection Once Given Filter Returns true

We can call the until method to stop iterating a collection once a given filter is true .

For instance, we can use it by writing:

const db = new Dexie("friends");
let cancelled = false;

db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .toCollection()
    .until(() => cancelled)
    .each(friend => {
      console.log(friend)
      cancelled = true;
    });
})()

We call until with a callback that returns the value of cancelled .

Then we call each and log the value of friend then we cancelled to true .

So after the first iteration of each , it’ll stop looping through the rest of the collection.

Conclusion

We can sort items, convert items to an array, get unique keys, and stop iteration with the given condition with Dexie.